<template>
  <view class="create-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">←</view>
      <view class="title">创建案件</view>
      <view class="save-btn" @click="saveCase">保存</view>
    </view>

    <!-- 案件基本信息 -->
    <view class="form-section">
      <view class="section-header">
        <view class="section-title">案件基本信息</view>
        <view class="section-subtitle">请填写案件的基本信息</view>
      </view>
      
      <view class="form-item">
        <view class="label">案件类型*</view>
        <view class="select-input" @click="showTypeSelector">
          <text class="select-text" v-if="formData.type">{{ getTypeText(formData.type) }}</text>
          <text class="placeholder" v-else>请选择案件类型</text>
          <text class="arrow">▼</text>
        </view>
      </view>

      <view class="form-item">
        <view class="label">案件标题*</view>
        <input class="input" placeholder="请输入案件标题" v-model="formData.title" />
      </view>

      <view class="form-item">
        <view class="label">案件编号</view>
        <input class="input" placeholder="请输入案件编号 (选填)" v-model="formData.caseNumber" />
      </view>

      <view class="form-item">
        <view class="label">案件描述*</view>
        <textarea 
          class="textarea" 
          placeholder="请详细描述案件情况..." 
          v-model="formData.description"
          maxlength="1000"
        ></textarea>
      </view>
    </view>

    <!-- 客户信息 -->
    <view class="form-section">
      <view class="section-header">
        <view class="section-title">客户信息</view>
        <view class="section-subtitle">请填写客户的详细信息</view>
      </view>
      
      <view class="form-item">
        <view class="label">客户姓名*</view>
        <input class="input" placeholder="请输入客户姓名" v-model="formData.client.name" />
      </view>

      <view class="form-item">
        <view class="label">联系电话*</view>
        <input class="input" placeholder="请输入客户联系电话" v-model="formData.client.phone" type="number" />
      </view>

      <view class="form-item">
        <view class="label">客户地址</view>
        <input class="input" placeholder="请输入客户联系地址 (选填)" v-model="formData.client.address" />
      </view>

      <view class="form-item">
        <view class="label">客户备注</view>
        <input class="input" placeholder="请输入客户相关备注信息 (选填)" v-model="formData.client.notes" />
      </view>
    </view>

    <!-- 证据材料 -->
    <view class="form-section">
      <view class="section-header">
        <view class="section-title">证据材料</view>
        <view class="section-subtitle">上传案件相关的证据材料</view>
      </view>
      
      <view class="upload-area" @click="uploadFiles">
        <view class="upload-icon">☁️</view>
        <view class="upload-text">点击或拖拽文件到此处上传</view>
        <view class="upload-hint">支持PDF、Word、图片等格式,单个文件不超过20MB</view>
      </view>
      
      <view class="uploaded-files">
        <text>已上传文件({{ uploadedFiles.length }})</text>
        <view class="file-list" v-if="uploadedFiles.length > 0">
          <view 
            class="file-item" 
            v-for="(file, index) in uploadedFiles" 
            :key="index"
            @click="removeFile(index)"
          >
            <text class="file-name">{{ file.name }}</text>
            <text class="remove-btn">×</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCurrentUser } from '../../src/services/userService.js'
import { createCase, updateCase } from '../../src/services/caseService.js'

export default {
  data() {
    return {
      mode: 'create', // create 或 edit
      caseId: '',
      formData: {
        type: '',
        title: '',
        caseNumber: '',
        description: '',
        client: {
          name: '',
          phone: '',
          address: '',
          notes: ''
        }
      },
      uploadedFiles: [],
      caseTypes: [
        { value: 'civil', text: '民事案件' },
        { value: 'criminal', text: '刑事案件' },
        { value: 'admin', text: '行政案件' },
        { value: 'other', text: '其他案件' }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.mode = 'edit'
      this.caseId = options.id
      this.loadCaseData()
    }
  },
  methods: {
    loadCaseData() {
      // 模拟加载案件数据
      this.formData = {
        type: 'civil',
        title: '张三与李四合同纠纷案件',
        caseNumber: 'C2024-001',
        description: '这是一个合同纠纷案件的详细描述...',
        client: {
          name: '张三',
          phone: '13812345678',
          address: '北京市朝阳区建国路88号',
          notes: '客户备注信息'
        }
      }
    },
    showTypeSelector() {
      const that = this
      uni.showActionSheet({
        itemList: this.caseTypes.map(item => item.text),
        success: function (res) {
          that.formData.type = that.caseTypes[res.tapIndex].value
        }
      })
    },
    getTypeText(type) {
      const typeItem = this.caseTypes.find(item => item.value === type)
      return typeItem ? typeItem.text : ''
    },
    uploadFiles() {
      uni.chooseFile({
        count: 9,
        type: 'file',
        success: (res) => {
          const tempFiles = res.tempFiles
          tempFiles.forEach(file => {
            this.uploadedFiles.push({
              name: file.name,
              size: this.formatFileSize(file.size),
              path: file.path
            })
          })
          uni.showToast({ title: `已选择${tempFiles.length}个文件`, icon: 'success' })
        },
        fail: (err) => {
          console.log('选择文件失败', err)
        }
      })
    },
    removeFile(index) {
      this.uploadedFiles.splice(index, 1)
    },
    formatFileSize(size) {
      if (size < 1024) return size + ' B'
      if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
      return (size / (1024 * 1024)).toFixed(1) + ' MB'
    },
    validateForm() {
      if (!this.formData.type) {
        uni.showToast({ title: '请选择案件类型', icon: 'none' })
        return false
      }
      if (!this.formData.title) {
        uni.showToast({ title: '请输入案件标题', icon: 'none' })
        return false
      }
      if (!this.formData.description) {
        uni.showToast({ title: '请输入案件描述', icon: 'none' })
        return false
      }
      if (!this.formData.client.name) {
        uni.showToast({ title: '请输入客户姓名', icon: 'none' })
        return false
      }
      if (!this.formData.client.phone) {
        uni.showToast({ title: '请输入客户电话', icon: 'none' })
        return false
      }
      return true
    },
    saveCase() {
      if (!this.validateForm()) return

      const user = getCurrentUser()
      if (!user) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
      }

      const caseData = {
        ...this.formData,
        id: this.mode === 'edit' ? this.caseId : Date.now().toString(),
        userId: user.id,
        createTime: new Date().toISOString().split('T')[0],
        updateTime: new Date().toISOString().split('T')[0],
        evidence: this.uploadedFiles
      }

      try {
        if (this.mode === 'edit') {
          updateCase(caseData)
          uni.showToast({ title: '案件更新成功', icon: 'success' })
        } else {
          createCase(caseData)
          uni.showToast({ title: '案件创建成功', icon: 'success' })
        }
        
        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      } catch (error) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      }
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.create-container {
  min-height: 100vh;
  background: #f7f8fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #fff;
  border-bottom: 2rpx solid #f1f5f9;
}

.back-btn {
  font-size: 32rpx;
  color: #3b82f6;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.save-btn {
  font-size: 28rpx;
  color: #3b82f6;
  font-weight: 600;
}

.form-section {
  background: #fff;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
}

.section-header {
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.section-subtitle {
  font-size: 26rpx;
  color: #6b7280;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  height: 88rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #1f2937;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #1f2937;
  line-height: 1.5;
}

.select-input {
  height: 88rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-text {
  font-size: 28rpx;
  color: #1f2937;
}

.placeholder {
  font-size: 28rpx;
  color: #9ca3af;
}

.arrow {
  font-size: 20rpx;
  color: #9ca3af;
}

.upload-area {
  border: 4rpx dashed #d1d5db;
  border-radius: 12rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  background: #f9fafb;
  margin-bottom: 24rpx;
}

.upload-icon {
  font-size: 48rpx;
  color: #9ca3af;
  margin-bottom: 16rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #6b7280;
  margin-bottom: 12rpx;
}

.upload-hint {
  font-size: 24rpx;
  color: #9ca3af;
  line-height: 1.4;
}

.uploaded-files {
  font-size: 26rpx;
  color: #6b7280;
  margin-bottom: 16rpx;
}

.file-list {
  margin-top: 16rpx;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  background: #f9fafb;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
}

.file-name {
  font-size: 26rpx;
  color: #1f2937;
  flex: 1;
}

.remove-btn {
  font-size: 32rpx;
  color: #ef4444;
  margin-left: 16rpx;
}
</style>
